<% 
    var headContent = {
%>
  <link rel="stylesheet" href="${base}/template/common/css/tree/amazeui.tree.css"/>
<style>
 /*树结构 begin*/
.am-tree .am-tree-item.am-tree-selected .am-tree-item-name .am-tree-label,
.am-tree.am-tree-folder-select .am-tree-branch.am-tree-selected > .am-tree-branch-header .am-tree-branch-name .am-tree-label {
  background-color: #0c80ba;
  color: #fff;
}
/*树结构 end*/
/*模态窗口 begin*/
.am-modal-dialog{
	top: 30%;
	text-center: left;
	font-size: 14px;
}

/*模态窗口 end*/
/*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
 </style>
<%
};
%>
<%layout("/common/_layout.html",{head:headContent}){ %>
<div id="select_org" class="am-modal am-modal-confirm" tabindex="-1">
				  <div class="am-modal-dialog">
					    <div class="am-modal-hd">机构选择</div>
					    <div class="am-modal-bd" id="modal-content" style="overflow: auto;height: 300px;overflow: auto;">
					    <%include("template_tree_folder_selected_page.tpl"){}%>
					    </div>
					    <div class="am-modal-footer">
					      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
					      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
					    </div>
				  </div>
			 </div>
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统管理</strong> / <small>机构编辑</small></div>
    </div>

  <div  class="am-tabs am-margin">
  
          <ul class="am-tabs-nav am-nav am-nav-tabs">
          <li class="am-active"><a href="#tab1">基本信息</a></li>
  
          </ul>
	          <form id="orgForm" class="am-form" action="${base!}/organization/update">
        <div class="am-tabs-bd">
	         <div id="tab1" class="am-tab-panel am-fade am-in am-active" >
	
		       <div class=" am-g am-margin-top am-form-group">
                <div class="am-u-sm-12 am-u-md-2 admin-form-text">机构类型</div>
                <div class="am-u-sm-12 am-u-md-10">
                <input  type="checkbox" data-size='xs' data-am-switch  data-off-text="机构" data-on-text="商家" disabled="disabled"
                <%if (pager.orgtype==2){%>
                    checked                                                        
                 <%}%>
                 >
                </div>
              </div>
              
              <div class="am-g am-margin-top am-form-group">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 选择上层机构
                </div>
                <div class="am-u-sm-4 am-u-md-4">
                  <input id="parentname" type="text" readonly="true" value="${pager.parentname!}" class="am-input-sm
                  <%if (pager.orgtype==1){%>
                    "                                                   
                 <%}%>
                 <%else{%>
                    js-pattern-parentname" data-validation-message="请选择上层机构" required   
                 <%}%>
                  /> 
                  <input id="parentid" name="parentid" type="hidden"  class="am-form-field am-input-sm" value=${pager.parentid!}>
                </div>
                <div class="am-u-sm-2 am-u-md-2">
			        <button id="bt_select_parent" type="button" class="am-btn am-btn-primary am-btn-xs" 
                 <%if (pager.orgtype==1){%>
                    disabled="disabled"                                                       
                 <%}%>
                 >选择</button>
			    </div>
    			<div class="am-hide-sm-only am-u-md-4" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg">
                    <div class="am-alert am-alert-danger">${parentnameMessages!}</div>
                </div>
              </div>
              
              
             
              <div class="am-g am-margin-top">
	              <div class="am-u-sm-2 am-u-md-2  ">
	              		机构标识
	              </div>
	              <div class="am-u-sm-10 am-u-md-4">
	              
	              <select id="orgSign" name="orgSign" data-am-selected="{btnSize: 'sm'}">
		              <option value="0" 
	                <%if (pager.orgSign==0){%>
	                   selected = "selected"
	                <%}%>
	                  >普通机构</option>
	                  
	                <option value="1" 
	                <%if (pager.orgSign==1){%>
	                   selected = "selected"
	                <%}%>
	                  >营业厅</option>
	                  
	                <option value="2" 
	                <%if (pager.orgSign==2){%>
	                   selected = "selected"
	                <%}%>
	                  >移动分公司</option>
	                
	                <option value="3" 
	                <%if (pager.orgSign==3){%>
	                   selected = "selected"
	                <%}%>
	                  >供货商</option>
	                  
	                <option value="4" 
	                <%if (pager.orgSign==4){%>
	                   selected = "selected"
	                <%}%>
	                  >门店</option>
	                  
	                <option value="5" 
                    <%if (pager.orgSign==5){%>
                       selected = "selected"
                    <%}%>
                      >渠道商</option>

	                    
	                  </select>
	              
             
	              </div>
	              <div class="am-hide-sm-only am-u-md-6" style="color:red;">*</div>
              </div>
              
              <div class="am-g am-margin-top am-form-group">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 机构名称
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input id="DisplayName" name="DisplayName" type="text" class="am-input-sm js-pattern-DisplayName" data-validation-message="请输入机构名称" placeholder="输入机构名称（2-100个字符）" value="${pager.DisplayName}" required/>
                </div>
                <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg">
                    <div class="am-alert am-alert-danger">${DisplayNameMessages!}</div>
                </div>
              </div>
              
              <div class="am-g am-margin-top am-form-group">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 渠道编码
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input id="NumCode" name="NumCode" type="text" value="${pager.NumCode}" class="am-input-sm js-pattern-NumCode" data-validation-message="请输入机构编号" placeholder="输入机构编号（2-100个字符）" required
                  <%if (pager.orgtype==1){%>
                    readonly="true"                                                   
                  <%}%>
                  />
                </div>
                <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg">
                    <div class="am-alert am-alert-danger">${NumCodeMessages!}</div>
                </div>
              </div>
              
              <div class="am-g am-margin-top am-form-group">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 排序数字
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input id="DisplayOrder" name="DisplayOrder" type="text" class="am-input-sm js-pattern-DisplayOrder" data-validation-message="请输入排序数字" value="${pager.DisplayOrder}" required/>
                </div>
                <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg">
                    <div class="am-alert am-alert-danger">${DisplayOrderMessages!}</div>
                </div>
              </div>
              
              <div class="am-g am-margin-top am-form-group">
                <div class="am-u-sm-4 am-u-md-2 ">
                 	 主要业务
                </div>
                <div class="am-u-sm-12 am-u-md-4">
                  <input id="Business" name="Business" type="text" class="am-input-sm js-pattern-Business" data-validation-message="请输入 主要业务" value="${pager.Business}"/>
                </div>
                <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg">
                    <div class="am-alert am-alert-danger">${BusinessMessages!}</div>
                </div>
              </div>
              
              <div class="am-g am-margin-top">
	              <div class="am-u-sm-2 am-u-md-2  ">
	              		状态
	              </div>
	              <div class="am-u-sm-10 am-u-md-4 switch-button">
	                 <input id="switch"   type="checkbox" data-size='xs' data-am-switch  data-off-text="无效" data-on-text="有效"
		                <%if (pager.enabled==1){%>
                            checked                                                        
		                 <%}%>
		                 <%if (pager.orgtype==1){%>
		                    readonly="true"                                                    
		                 <%}%>
		                 > 
                    
	                 <input id="enabled" name="enabled" type="hidden" class="am-input-sm" value="${pager.enabled!}"/>
	              
	              </div>
	              <div class="am-hide-sm-only am-u-md-6" style="color:red;">*</div>
              </div>
              
              <div class="am-g am-margin-top">

                <div class="am-u-sm-12 am-u-md-4">
                  <input id="id" name="id" type="hidden" class="am-input-sm" value="${pager.id}"/>
                </div>
     
              </div>
              
              <div class="am-g">
              <button type="submit" class="am-margin am-btn am-btn-primary am-btn-xs" >提交保存</button>
              <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript: History.back();">返回上一级</button>
            </div>
             
	    </div>
	         
	     </form> 

	    
        </div>

 

  <script type="text/javascript" src="${base}/template/common/js/tree/amazeui.tree.js"></script>
  <script type="text/javascript">
  var id_parent= "${pager.parentid}";
  var name_parent= "${pager.parentname}";
  

  
  $(function() {
	  
	  /*表单验证：begin*/
      //自定义规则，用法：验证元素上加class="js-pattern-sort"
      if ($.AMUI && $.AMUI.validator) {
    	  
    	  
    	$.AMUI.validator.patterns.businessCode = /^([0-9a-zA-Z]+)$/;  
        $.AMUI.validator.patterns.DisplayOrder = /^([0-9]+)$/;
      }
      
      $("#orgForm").validator({
        // 域通过验证时回调
        onValid: function(validity) {
          $(validity.field).closest('.am-form-group').find('.am-alert').hide();
        },
        // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
        onInValid: function(validity) {
            
          var $field = $(validity.field);
          var $group = $field.closest('.am-form-group');
          var $alert = $group.find('.am-alert');
          // 使用自定义的提示信息 或 插件内置的提示信息
          var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
  
          if (!$alert.length) {
            $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
            appendTo($group.find(".input-msg"));
          }
          console.log("onInValid : "+$field.val());
          console.log("msg : "+msg);
          $alert.html(msg).show();
        }
      });
      /*表单验证：end*/
	  
	  
	  
	  function getOrgList(){
		 
		  var treeObj = $('#myTreeSelectableFolder').tree({
              dataSource: function(options, callback) {
            	  $.ajax({
      				url: "${base}/organization/tree",
      				type: 'POST',
      				data: {},
      				cache:false
      			})
      			.done(function(result) {
      				callback({data: options.products || JSON.parse(result)});

      					 
      			})
      			.fail(function() {
      				console.log("error");
      			})
      			.always(function() {
      				console.log("complete");
      			});			
                // 模拟异步加载
                
              },
              multiSelect: false,//多选
              cacheItems: true,//缓存树结构，为false的话，每次重新生成树结构
              folderSelect: true//文件夹（父节点）可选，选中后即选中该文件夹下所有子节点
            });

            $('#myTreeSelectableFolder').on('loaded.tree.amui', function (event, data) {//加载事件
             
            	
            });

            $('#myTreeSelectableFolder').on('selected.tree.amui', function (event, data) {//选中事件
            	id_parent=data.target.attr.id;
            	name_parent=data.target.title;
             
            });

            $('#myTreeSelectableFolder').on('closed.tree.amui', function (event, data) {//关闭父树节点事件
            	
					 
            });
      }        
	  $("#bt_select_parent").on('click',function(event) {
		  getOrgList();
		   $("#select_org").modal({
				onConfirm:function(){
					$("#parentname").val(name_parent);
					$("#parentid").val(id_parent);
					
				}
			});
	  });
	  
	  var $mycheckbox = $('.switch-button');
      $mycheckbox.each(function(){
          $("#switch").on({
              'switchChange.bootstrapSwitch': function(event, state) {
                  if(state.toString()=="true"){
                      $("#enabled").val("1");
                  }else{
                      $("#enabled").val("2");
                  }
                  console.log($("#enabled").val());
              }
          });
      });

	  
            
  });
  </script>
	<%}%>